import { createApp } from 'vue'
// import App from './App.vue'
// import App from './components/01.ref/App.vue'
// import App from './components/02.$nextTick/App.vue'
// import App from './components/03.dynamic/App.vue'
// import App from './components/04.base-slot/App.vue'
// import App from './components/05.named-slot/App.vue'
// import App from './components/06.scoped-slot/App.vue'
import App from './components/07.directive/App.vue'
import './index.css'
import './assets/css/bootstrap.css'

const app=createApp(App)
// 在mounted和updated有相同业务逻辑时可以简写为以下形式
app.directive('focus',(el)=>{
  el.focus()
}
  // mounted(el){
  //   el.focus()
  //   console.log('mounted');
  
  // updated(el){
  //   el.focus()
  //   console.log('updated');
  // }
),
app.directive('color',(el,binding)=>{
  el.style.color=binding.value
})
app.mount('#app')
